<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Task Difficulty Leaderboard</title>
	<link rel="stylesheet" href="style.css">
	<script src="app.js"></script>
	
</head>
<body>
	<nav class="navbar">
		<a href="index.html" class="nav-brand">k8s-ai-bench</a>
		<div class="nav-links">
			<a href="index.html" class="nav-btn">Leaderboard</a>
			<a href="tasks.html" class="nav-btn active">Tasks</a>
			<a href="about.html" class="nav-btn">About</a>
			<a href="https://github.com/GoogleCloudPlatform/kubectl-ai" class="nav-btn" target="_blank">GitHub &nearr;</a>
		</div>
	</nav>
	<div class="container">
		
		<h1>Task Difficulty Leaderboard</h1>
		<p style="text-align: center; max-width: 800px; margin: 0 auto; color: #57606a;">
			Click task name to view source on Github. Click 'View Stats' to see task results for all models.
		</p>
		<table id="tasks-table">
			<thead>
				<tr>
					<th data-idx="0" style="width: 50%;">Task Name</th>
					<th data-idx="1" style="width: 30%;">Overall Pass@1</th>
					<th data-idx="2" style="width: 20%;">Details</th>
				</tr>
			</thead>
			<tbody></tbody>
		</table>
		<script>
			window.renderPage = function() {
				if(!window.PROCESSED_DATA) return;
				const tbody = document.querySelector('#tasks-table tbody');
				const repoUrl = "https://github.com/GoogleCloudPlatform/kubectl-ai/tree/main/k8s-ai-bench/tasks/";
				tbody.innerHTML = window.PROCESSED_DATA.tasks.map(t => {
					return '<tr><td><a href="'+repoUrl+encodeURIComponent(t.name)+'" class="task-link" target="_blank"><strong>'+t.name+'</strong> &nearr;</a></td>' +
						   '<td>'+t.p1+'% '+createMiniBar(t.p1, getHue(t.p1))+'</td>' +
						   '<td><a href="task_detail.html?id='+encodeURIComponent(t.name)+'" class="log-link">View Stats &rarr;</a></td></tr>';
				}).join('');
			}
		</script>
	
	</div>
</body>
</html>